<template>
  <div>
    <a-tabs default-active-key="1" size="large" @change="callback">
      <a-tab-pane key="1" tab="发票记录">
        <div class="info" v-show="detFlag">
          <div class="all_top dlex2-div">
            <a-select
              default-value="发票类型"
              style="width: 120px"
              @change="handleChange"
              v-model="invoiceType"
            >
              <a-select-option value=""> 全部 </a-select-option>
              <a-select-option value="01"> 企业 </a-select-option>
              <a-select-option value="02"> 个人 </a-select-option>
            </a-select>
            <span class="titleTxt7">按时间筛选：</span>
            <div>
              <a-range-picker
                @change="onChangedata"
                :disabled-date="disabledDate"
                format="YYYY-MM-DD"
              />
            </div>
          </div>
          <div class="info_top">
            <span>序号</span>
            <span>发票类型</span>
            <span>发票金额</span>
            <span>申请时间</span>
            <span>订单编号</span>
            <span style="margin-left: 57px">状态</span>
            <span>操作</span>
          </div>
          <div class="info_list" v-if="invoiceList2.length > 0 && !spFlag">
            <ul v-for="(item, index) in invoiceList2" :key="index">
              <li style="width: 94px">{{ index + 1 }}</li>
              <li style="width: 122px">
                {{ item.invoiceType == "02" ? "企业单位" : "个人" }}
              </li>
              <li style="width: 122px">￥{{ item.totalPrice }}</li>
              <li style="width: 122px">{{ item.createDate }}</li>
              <li style="width: 173px">{{ item.invoiceNo }}</li>
              <li style="width: 102px">
                {{ item.invoicingStatus == 2 ? "已开具" : "未开具 " }}
              </li>
              <li
                class="handtype"
                @click="Component1Data(false, item.invoiceNo)"
              >
                详情
              </li>
            </ul>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 40px auto"
            v-if="invoiceList2.length < 1 && !spFlag"
          />
          <a-pagination
            style="text-align: center; margin-top: 32px"
            @change="onChange"
            v-model="current"
            :pageSize="7"
            :total="curall"
            show-less-items
            v-if="invoiceList2.length > 0 && !spFlag"
          />
        </div>
        <Detailsa
          v-show="!detFlag"
          :detFlag="detFlag"
          @changeComponent1Data="Component1Data"
          ref="asdtelo"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="抬头信息" force-render>
        <div class="zutn">
          <div class="dlex2-div">
            <a-button v-if="invoiceList.length < 7" @click="showModal" class="introduce_btn">
              <img src="@/assets/image/icon_add.png" alt="" /> 添加发票信息
            </a-button>
            <span class="titleTxt2"
              >您已创建<a>{{ invoiceList.length }}</a
              >个，还可以创建<a>{{ 7 - invoiceList.length }}</a
              >个</span
            >
          </div>
          <div class="">
            <div class="bill" v-for="(item, index) in invoiceList" :key="index">
              <div class="dlex2-div">
                <h2>电子发票</h2>
                <h2 style="margin-left: 40px; flex: 1">
                  {{ item.invoiceType == "02" ? "企业单位" : "个人" }}
                </h2>

                <a-popconfirm
                  title="确定删除？"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="selDelete(item.invoiceNo)"
                >
                  <img width="22" src="@/assets/image/icon_del.png" alt="" />
                </a-popconfirm>
              </div>
              <div class="layer">
                <div class="dlex2-div">
                  <span class="txt1"
                    >抬头类型：<a>{{
                      item.invoiceType == "02" ? "企业单位" : "个人"
                    }}</a></span
                  >
                </div>
                <div class="dlex2-div">
                  <span class="txt1"
                    >发票抬头：<a>{{ item.invoiceHead }}</a></span
                  >
                </div>
                <div class="dlex2-div" v-if="item.identificNumber">
                  <span class="txt1"
                    >识别号：<a>{{ item.identificNumber }}</a></span
                  >
                </div>
                <div class="dlex2-div">
                  <span class="txt1"
                    >电子邮箱：<a>{{ item.drawerEmail }}</a></span
                  >
                  <img
                    width="14"
                    v-if="item.defaultFlag == 'Y'"
                    src="@/assets/image/icon-true.png"
                    alt=""
                  />
                  <p
                    style="margin-left: 8px"
                    @click="selDefault(item.invoiceNo)"
                  >
                    默认发票
                  </p>
                  <p style="margin-left: 24px" @click="selEdit(index)">编辑</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div>
      <a-modal v-model="visible" title="添加发票信息" @ok="handleOk()">
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleSubmit"
        >
          <a-form-item label="抬头类型：">
            <a-select
              v-decorator="[
                'invoiceType',
                {
                  rules: [{ required: true, message: '请选择抬头类型' }],
                  initialValue: realTime.invoiceType,
                },
              ]"
              placeholder="请选择发票类型"
              @change="handleSelectChange"
            >
              <a-select-option value="02"> 企业 </a-select-option>
              <a-select-option value="01"> 个人 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="发票抬头：">
            <a-input
              v-decorator="[
                'invoiceHead',
                {
                  rules: [
                    { required: true, message: '请填写发票抬头!' },
                    {
                      pattern: /^[0-9a-zA-Z\(\)\（\）\u4e00-\u9fa5]{0,50}$/,
                      message: '请填写发票抬头',
                    },
                  ],
                  initialValue: realTime.invoiceHead,
                },
              ]"
              placeholder="请填写开票人姓名；请填写接收电子邮箱"
            />
          </a-form-item>
          <a-form-item label="识别号：" v-if="formFlag">
            <a-input
              v-decorator="[
                'identificNumber',
                {
                  rules: [
                    { required: true, message: '请填写识别号！' },
                    {
                      pattern:
                        /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
                      message: '请填写正确识别号！',
                    },
                  ],
                  initialValue: realTime.identificNumber,
                },
              ]"
              placeholder="请填写识别号"
            />
          </a-form-item>
          <a-form-item label="邮箱：">
            <a-input
              v-decorator="[
                'drawerEmail',
                {
                  rules: [
                    { required: true, message: '请填写邮箱!' },
                    {
                      pattern:
                        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
                      message: '请输入正确的邮箱',
                    },
                  ],
                  initialValue: realTime.drawerEmail,
                },
              ]"
              placeholder="请填写识别号"
            />
          </a-form-item>
          <a-form-item label="开户银行：" v-if="formFlag">
            <a-input
              v-decorator="[
                'openBanck',
                {
                  rules: [{ required: false, message: '请填写开户银行!' }],
                  initialValue: realTime.openBanck,
                },
              ]"
              placeholder="请填写识开户银行"
            />
          </a-form-item>
          <a-form-item label="银行账号：" v-if="formFlag">
            <a-input
              v-decorator="[
                'bankAccount',
                {
                  rules: [
                    { required: false, message: '请填写正确银行账号！' },
                    {
                      pattern: /^([1-9]{1})(\d{14,18})$/,
                      message: '请填写正确的银行账号！',
                    },
                  ],
                  initialValue: realTime.bankAccount,
                },
              ]"
              placeholder="请填写银行账号"
            />
          </a-form-item>
          <a-form-item label="备注：" v-if="formFlag">
            <a-input
              v-decorator="[
                'invoiceDescr',
                {
                  rules: [{ required: false, message: '' }],
                  initialValue: realTime.invoiceDescr,
                },
              ]"
            />
          </a-form-item>
        </a-form>
        <div class="btns" slot="footer">
          <a-button class="btn_info" type="primary" @click="handleSubmit">
            提交
          </a-button>
          <a-button class="btn_info" @click="handleOk(1)"> 取消 </a-button>
        </div>
      </a-modal>
    </div>
    <a-spin v-if="spFlag" size="large" />
  </div>
</template>
<script>
import Detailsa from "@/components/news/InvoiceDetails.vue";
import moment from "moment";
export default {
  components: {
    Detailsa,
  },
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      invoice: [],
      spFlag: true,
      // 组件显隐
      detFlag: true,
      // 表单内操作
      visible: false,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      // 控制表单内选项
      formFlag: true,
      iconLoading: false,
      // 列表
      invoiceList: [],
      invoiceList2: [],
      // 编辑时渲染
      realTime: {},
      //
      webUrl: "/user/user/invoice/save",
      // 关键字
      invoiceType: "",
      // 分页控制
      current: 1,
      curall: 1,
      // 时间筛选器
      endDate: "", //结束
      startDate: "", //开始
    };
  },
  methods: {
    callback(key) {
      return key;
      console.log(key);
    },
    // 对话框中的内容
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      // console.log(e);
      this.realTime = {};
      this.form= this.$form.createForm(this, { name: "coordinated" });
      this.formFlag = true;
      this.visible = false;
    },

    onChange(e) {
      // console.log(e);
      this.getInvoicelist2(e);
    },
    //91110101MA003YQL3B
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.spFlag = true;
          this.addInvoice(values);
          this.handleOk();
        }
      });
    },
    // 个人发票和企业发票的区别
    handleSelectChange(value) {
      if (value != "01") {
        this.form.invoiceType = value;
        this.formFlag = true;
      } else {
        this.form.invoiceType = value;
        this.formFlag = false;
      }
      // console.log(this.form.invoiceType);
    },
    // 选择时调用
    handleChange(e) {
      // console.log(e);
      this.search(1);
    },

    // 接手来自详情子组件的值
    Component1Data(params, e) {
      // console.log(params);
      if (!params) {
        this.$refs.asdtelo.getInvoice(e);
      }
      this.spFlag = true;

      setTimeout(() => {
        this.detFlag = params;
        this.spFlag = false;
      }, 1000);
    },

    // 编辑
    selEdit(e) {
      // this.form=this.invoiceList[e];
      this.webUrl = "/user/user/invoice/update";
      this.realTime = this.invoiceList[e];
      this.visible = true;
    },
    // 默认
    selDefault(e) {
      this.spFlag = true;
      this.$ajax({
        url: "/user/user/invoice/update",
        method: "post",
        params: {
          invoiceNo: e,
          defaultFlag: "Y",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getInvoicelist();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //删除
    selDelete(e) {
      this.$ajax({
        url: "/user/user/invoice/delete",
        method: "post",
        params: {
          invoiceNo: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getInvoicelist();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 搜索功能
    search() {
      this.spFlag = true;
      this.current = 1;
      this.getInvoicelist2(1);
    },
    // 查询用户开票信息
    getInvoicelist2(e) {
      this.$ajax({
        url: "/user/invoice/record/list?pageIndex=" + e + "&pageSize=7",
        method: "post",
        params: {
          invoiceType: this.invoiceType, //类型
          startDate: this.startDate,
          endDate: this.endDate,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.invoiceList2 = res.data.list;
          this.curall = res.data.totalCount;
          // console.log(this.curall);
          this.spFlag = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 查询用户已添加的发票抬头等信息
    getInvoicelist() {
      this.$ajax({
        url: "/user/user/invoice/list?pageIndex=1" + "&pageSize=7",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.invoiceList = res.data.list;
          this.spFlag = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 新增/修改发票抬头详情信息
    addInvoice(e) {
      e.defaultFlag = "N";
      e.invoiceNo = this.realTime.invoiceNo;
      this.$ajax({
        url: this.webUrl,
        method: "post",
        params: e,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getInvoicelist();
          this.webUrl = "/user/user/invoice/save";
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 日期选择器

    // 时间筛选器
    onChangedata(e, r) {
      this.spFlag = true;
      this.startDate = r[0];
      this.endDate = r[r.length - 1];
      this.getInvoicelist2(1);
    },
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },

    disabledDate(current) {
      // Can not select days before today and today
      // 1年前
      // console.log(moment(new Date()).subtract(1,'years') > current && current > moment().endOf("day"));

      return current && current < moment(new Date()).subtract(1, "years");
    },
  },
  created() {
    this.getInvoicelist();
    this.getInvoicelist2(1);
  },
};
</script>


<style lang="less" scoped>
.info {
  .info_top {
    width: 920px;
    height: 50px;
    background: #f5f5f5;
    padding: 15px 20px;

    span {
      font-size: 14px;
      font-family: PingFang SC;
      color: #333333;
      margin-right: 66px;
    }
  }
  .info_list {
    ul {
      padding: 15px 20px;
      display: block;
      overflow: hidden;
      li {
        float: left;
        font-size: 14px;
        font-family: PingFang SC;
        color: #666666;
      }
    }
    ul:nth-child(2n) {
      background: #f5f5f5;
    }
  }
  .all_top {
    margin-bottom: 20px;
  }
}

.bill {
  margin-top: 16px;
  width: 100%;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #cccccc;
  img {
    cursor: pointer;
  }
  h2 {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  .layer {
    margin-top: 20px;
    width: 100%;
    .dlex2-div {
      margin-bottom: 24px;
      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffbe37;
        cursor: pointer;
      }
    }
    .txt1 {
      font-size: 14px;
      font-family: PingFang SC;
      color: #999999;
      flex: 1;
      a {
        color: #333333;
      }
    }
    .txt2 {
      font-size: 14px;
      font-family: PingFang SC;
      color: #999999;
      a {
        color: #333333;
      }
    }
  }
}

.btns {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  .btn_info {
    width: 92px;
    height: 40px;
    border-radius: 4px;
  }
}
.serch {
  width: 166px;
  height: 30px;
  background: #ffffff;
  border-radius: 1px;
  border: 1px solid #cccccc;
  font-size: 14px;
  font-family: PingFang SC;
  margin-left: 40px;
  color: #999999;
  margin-right: 36px;
}
/deep/.ant-btn {
  span {
    font-family: PingFang SC;
  }
}
// 按钮样式
.introduce_btn {
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(255, 190, 55, 0.1);
  font-family: PingFang SC;
  color: #232d32;
  line-height: 20px;
  img {
    width: 12px;
    margin-right: 4px;
  }
}
.titleTxt2 {
  margin-left: 32px;
}
.handtype {
  width: 34px;
}
/deep/.ant-modal-header {
  text-align: center;
}
.titleTxt7{
  margin-left: 36px;
}
</style>
